<template>
  <div class="customer">
    <van-nav-bar
        title="商机信息列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <van-search
        v-model="fname"
        show-action
        background="#57a3f3"
        placeholder="请输入商机名称"
    >
      <template #action>
        <van-button size="small" type="info" @click="onSearch()" style="width: 60px;">查询</van-button>
      </template>
    </van-search>
    <!--操作按钮-->
    <div class="actionButton">
      <van-button size="small" icon="plus" type="info" @click="toAdd">新增</van-button>
      <van-button style="margin-left: 4px" size="small" icon="search" type="info" @click="superQuery">高级查询</van-button>
    </div>
    <!--切换页签-->
    <van-tabs v-model="activeKey" color="#1989fa" @click="changeTabs">
      <van-tab title="我的商机" name="1"></van-tab>
      <van-tab title="共享商机" name="2"></van-tab>
      <van-tab title="团队商机" name="3"></van-tab>
    </van-tabs>
    <!--表格区域--->
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>商机建立日期</div>
          <div>客户名称</div>
          <div>商机编号</div>
          <div>商机名称</div>
          <div>当前阶段</div>
          <div>状态</div>
          <div>操作</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index" @click.stop="toDetail(task)">
          <div>{{ task.createTime }}</div>
          <div>{{ task.fcustomer }}</div>
          <div>{{ task.fbillno }}</div>
          <div>{{ task.fname }}</div>
          <div>{{ task.fnewjd }}</div>
          <div>{{ task.fstatusName }}</div>
          <div>
            <div class="btnWrapper">
              <a class="btn1" @click.stop="toDetail(task)">详情</a>
              <a v-show="task.fstatus == '0'" class="btn1" @click.stop.prevent="toEdit(task)">编辑</a>
              <a v-show="task.fstatus == '0'" class="btn2" @click.stop="toDelete(task)">删除</a>
              <a v-show="task.fstatus == '0'" class="btn3" @click.stop="toCheck(task)">审核</a>
              <a v-show="task.fstatus == '1'" class="btn3" @click.stop="toUnCheck(task)">反审核</a>
              <a v-show="(task.fstatus == 1 || task.fstatus == 3) && task.fresultstatus == 0" class="btn3" @click.stop="toFollow(task)">跟进</a>
              <a v-show="task.fresultstatus == 0" class="btn3" @click.stop="toTask(task)">代办事项</a>
            </div>

          </div>
        </div>
      </van-list>
    </div>
    <!--分页-->
    <div>
      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <!--高级筛选-->
    <van-popup v-model="searchVisible" position="top" :style="{height: '50%'}">
      <div style="margin-top: 15px">
        <van-cell-group>
          <van-field label="商机编号" v-model="fbillno" placeholder="请输入商机编号" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="客户名称" v-model="fcustomer" placeholder="请输入客户名称" />
        </van-cell-group>
        <van-cell-group>
<!--          <van-field readonly clickable @click="chooseFun('状态', columnsSjstatus, 1)" label="状态" v-model="fstatusName" placeholder="请选择状态" />-->
          <van-field label="状态" placeholder="请选择状态">
            <template #input>
              <van-checkbox-group v-model="fstatus" direction="horizontal">
                <van-checkbox v-for="col in columnsSjstatus" :key="col.code" :name="col.code" shape="square">{{ col.text }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
        </van-cell-group>
        <van-cell-group>
          <van-field readonly clickable @click="chooseFun('赢单状态', columnsFresultstatus, 2)" label="赢单状态" v-model="fresultstatusName" placeholder="请选择赢单状态" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="商机建立日期" readonly clickable @click="onChangeDate" v-model="createTimeRange" placeholder="请选择商机建立日期" />
        </van-cell-group>
        <div class="super-search">
          <van-button block @click="searchReset">重置</van-button>
          <van-button block type="info" @click="searchQuery">确定</van-button>
        </div>
      </div>
    </van-popup>
    <!--多个日期-->
    <van-calendar v-model="dateShow" type="range" @confirm="onConfirm" />
    <!--选择-->
    <van-popup v-model="showPickerFun" position="bottom">
      <van-picker
          :title="choosetitle"
          show-toolbar
          :columns="columnsFun"
          @confirm="changeFun"
          @cancel="showPickerFun = false"
      />
    </van-popup>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
import { mapState } from 'vuex'
import { opportunityList, opportunityDelete, opportunityDoRepeat, opportunityDoUnRepeat, getDicts } from '@/api/api'
import { Notify, Dialog, Toast } from 'vant'
import moment from "moment";
import {filterObj} from "../../utils/utils";

var sha1 = require('js-sha1')

export default {
  name: "sjInfoList",
  components: {
  },
  data () {
    return {
      activeKey: '1',
      ftype: '',
      choosetitle: '',
      fname: '',
      fbillno: '',
      fcustomer: '',
      fstatus: ['0','1','2','3'],
      fstatusName: '',
      fresultstatus: '0',
      fresultstatusName: '未确认',
      createTime_begin: '',
      createTime_end: '',
      createTimeRange: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      searchVisible: false,
      dateShow: false,
      showPickerFun: false,
      taskList: [],
      columnsSjstatus: [],
      columnsFresultstatus: [],
      columnsFun: [],
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId,
      access_token: state => state.app.access_token,
      ticket: state => state.app.ticket,
      appId: state => state.user.appId
    })
  },
  mounted() {
  },
  created () {
    this.getList(1)
    getDicts('sjstatus').then(res => {
      if(res.success) {
        this.columnsSjstatus = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('fresultstatus').then(res => {
      if(res.success) {
        this.columnsFresultstatus = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
  },
  methods: {
    changeTabs(key) {
      let that=this;
      that.activeKey = key
      that.getList();
    },
    searchReset () {
      this.fbillno = ''
      this.fstatus = []
      this.fstatusName = ''
      this.fresultstatus = ''
      this.fresultstatusName = ''
      this.createTimeRange = ''
      this.createTime_begin = ''
      this.createTime_end = ''
      this.fcustomer = ''
      this.activeKey = '1'
    },
    searchQuery () {
      this.searchVisible = false
    },
    superQuery () {
      this.searchVisible = true
    },
    onChangeDate () {
      this.dateShow = true
    },
    onConfirm (date) {
      console.log(date)
      this.createTime_begin = moment(date[0]).format('YYYY-MM-DD')
      this.createTime_end = moment(date[1]).format('YYYY-MM-DD')
      this.createTimeRange = moment(date[0]).format('YYYY-MM-DD') + '~' + moment(date[1]).format('YYYY-MM-DD')
      this.dateShow = false
    },
    chooseFun (title, columns, ftype) {
      this.showPickerFun = true
      this.ftype = ftype
      this.choosetitle = title
      this.columnsFun = columns
    },
    changeFun (value, index) {
      console.log(value, index)
      switch (this.ftype) {
        case 1:
          this.fstatusName = value.text
          this.fstatus = value.code
          break;
        case 2:
          this.fresultstatus = value.code
          this.fresultstatusName = value.text
          break;
      }
      this.showPickerFun = false
    },
    onSearch () {
      this.getList(1)
    },
    getList (pageNo) {
      let params = filterObj({
        fname: this.fname,
        fbillno: this.fbillno,
        fstatus: this.fstatus.length>0? this.fstatus.join() : '',
        fresultstatus: this.fresultstatus,
        createTime_begin: this.createTime_begin,
        createTime_end: this.createTime_end,
        fcustomer: this.fcustomer,
        flisttype: this.activeKey
      })
      opportunityList({
        ...params,
        pageNo: pageNo,
        pageSize: this.pageSize
      }).then(res => {
        if (res.success) {
          this.taskList = res.result.records
          this.total = res.result.total
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
    },
    changePg () {
      this.getList(this.pageNo)
    },
    toAdd () {
      this.$router.push({name: 'sjAdd', params: {isAdd: true}})
    },
    toEdit (task) {
      this.$router.push({name: 'sjAdd', params: {isAdd: false, id: task.id, fbusinessid: task.fbusinessid, isDetail: false }})
    },
    toDetail (task) {
      this.$router.push({name: 'sjAdd', params: {id: task.id, fbusinessid: task.fbusinessid, isDetail: true }})
    },
    toFollow (task) {
      this.$router.push({name: 'sjAdd', params: {isFollow: true, id: task.id, fbusinessid: task.fbusinessid, isDetail: false, fnewjd: task.fnewjd, fnewnodeid: task.fnewnodeid}})
    },
    toDelete(task) {
      Dialog.confirm({
        message: '是否删除该条管理信息数据？',
      }).then(() => {
            opportunityDelete({id: task.id}).then(res => {
              if (res.success) {
                Notify({ type: 'success', message: '管理信息删除成功!', duration: 4000 })
                this.onSearch()
              }else {
                Notify({ type: 'warning', message: res.message, duration: 4000 })
              }
            })
          })
          .catch(() => {
            // on cancel
          });
    },
    toCheck (task) {
      Dialog.confirm({
        message: '是否审核该条管理信息数据？',
      }).then(() => {
        opportunityDoRepeat({id: task.id}).then(res => {
              if (res.success) {
                Notify({ type: 'success', message: '管理信息审核成功!', duration: 4000 })
                this.onSearch()
              }else {
                Notify({ type: 'warning', message: res.message, duration: 4000 })
              }
            })
          })
          .catch(() => {
            // on cancel
          });
    },
    toUnCheck (task) {
      Dialog.confirm({
        message: '是否反审核该条管理信息数据？',
      }).then(() => {
        opportunityDoUnRepeat({id: task.id}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '管理信息反审核成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    toTask (record) {
      this.$router.push({
        name: 'myTaskList',
        params: {
          fopportunityid: record.id,
          fbusinessid: record.fbusinessid
        }
      })
    },
    back () {
      this.$router.push({name: 'modules'})
    },
  }
}
</script>

<style scoped>
.customer{
  min-height: 100vh;
  background: #ffffff;
}
.actionButton {
  display: flex;
  flex-direction: row;
  margin: 4px;
}
.listColumn{
  width: 1220px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn div:nth-of-type(1) {
  width: 120px;
}
.listColumn div:nth-of-type(2) {
  width: 250px;
}
.listColumn div:nth-of-type(3) {
  width: 200px;
}
.listColumn div:nth-of-type(4) {
  width: 150px;
}
.listColumn div:nth-of-type(5) {
  width: 200px;
}
.listColumn div:nth-of-type(6) {
  width: 100px;
}
.listColumn div:last-child {
  width: 200px;
}
.listItem{
  width: 1220px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem div:nth-of-type(1) {
  width: 120px;
}
.listItem div:nth-of-type(2) {
  width: 250px;
}
.listItem div:nth-of-type(3) {
  width: 200px;
}
.listItem div:nth-of-type(4) {
  width: 150px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
}
.listItem div:nth-of-type(5) {
  width: 200px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 显示省略号来代表被修剪的文本 */
}
.listItem div:nth-of-type(6) {
  width: 100px;
}
.listItem div:last-child {
  width: 200px;
}
.super-search {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;;
}
.van-sidebar-item--select::before {
  background-color: #1989fa;
}
.btnWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #1989fa;
}
.btn1 {

}
.btn2 {

}
.btn3 {

}
.uploadWrapper {
  display: flex;
  flex-direction: column;
  color: #1989fa;
  font-size: 14px;
}
</style>